<div-divider></div-divider>
<div class="wrap" style="background: #f6f6f6">
    <div class="row">
        <!--重复部分-->
        <div ng-repeat="item in ActHdata" class="activityBox col-xs-12 col-sm-6 col-md-3">
            <div ng-if="item.activityStatus=='活动进行中'" class="thumbnail ved-box" ng-click="jump('/actIng/'+item.fileId)">
                <div class="act-con">
                    <img class="img-responsive" src="{{item.imageUrl||'static/images/07.jpg'}}" alt="">
                    <div class="cont-img-mod"><!--判断是否隐藏-->
                        <div class="cont-img-mod-text">{{item.activityStatus}}</div>
                        <div class="cont-img-mod-bg"></div>
                    </div>
                </div>
                <div class="ved-desc">
                    <h4>{{item.title}}</h4>
                    <p class="ved-descFoot"><span>{{item.publishtime|fomatTime}}</span><span style="float:right">{{item.participatorNum}}人已参加</span></p>
                </div>
            </div>
            <!--活动已结束和未开始-->
            <div ng-if="item.activityStatus=='活动已结束'" class="thumbnail ved-box" ng-click="jump('/actNoSt/'+item.fileId)">
                <div class="act-con">
                    <img class="img-responsive" src="{{item.imageUrl||'static/images/07.jpg'}}" alt="">
                    <div class="cont-img-mod"><!--判断是否隐藏-->
                        <div class="cont-img-mod-text">{{item.activityStatus}}</div>
                        <div class="cont-img-mod-bg"></div>
                    </div>
                </div>
                <div class="ved-desc">
                    <h4>{{item.title}}</h4>
                    <p class="ved-descFoot"><span>{{item.publishtime|fomatTime}}</span><span style="float:right">{{item.participatorNum}}人已参加</span></p>
                </div>
            </div>
            <!--活动已结束和未开始-->
            <div ng-if="item.activityStatus=='活动未开始'" class="thumbnail ved-box" ng-click="jump('/actNoSt/'+item.fileId)">
                <div class="act-con">
                    <img class="img-responsive" src="{{item.imageUrl||'static/images/07.jpg'}}" alt="">
                    <div class="cont-img-mod"><!--判断是否隐藏-->
                        <div class="cont-img-mod-text">{{item.activityStatus}}</div>
                        <div class="cont-img-mod-bg"></div>
                    </div>
                </div>
                <div class="ved-desc">
                    <h4>{{item.title}}</h4>
                    <p class="ved-descFoot"><span>{{item.publishtime|fomatTime}}</span><span style="float:right">{{item.participatorNum}}人已参加</span></p>
                </div>
            </div>
        </div>
    </div>
    <!--加载更多-->
    <div ng-show="loadMoreButtonOne" style="margin:0.3rem">
        <button class="btn" ng-click="loadMore(currentPageId,columnStyle)" style=" background: #FCA204;padding:0.1rem 0.2rem;margin: 0 auto;display: block;color: #ffffff">加载更多</button>
    </div>
    <!--没有更多数据-->
    <div ng-show="noLoadMoreButton" style="margin:0.3rem">
        <button disabled class="btn" style=" background: #FCA204;padding:0.1rem 0.2rem;margin: 0 auto;display: block;color: #ffffff">没有更多数据</button>
    </div>

</div>

<style>
    .ved-desc{
        height: 50px;
        margin: 20px 0;
    }
    .act-con{
        position: relative;
        width: 100%;

        overflow: hidden;
    }
    .act-con img{
        width: 100%;
        height: 160px;
    }
    .cont-img-mod{
        position: absolute;
        border-radius: 4px;
        bottom: 10px;
        right: 10px;
        width: 92px;
        height: 25px;
        overflow: hidden;
    }
    .cont-img-mod-text,.cont-img-mod-bg{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
    }
    .cont-img-mod-text{
        text-align: center;
        color: #fff;
        z-index: 10;
    }
    .cont-img-mod-bg{
        z-index: 1;
        background: #000;
        opacity: 0.6;
        filter:alpha(opacity=60);
        -moz-opacity:0.6;
        -khtml-opacity: 0.6;
    }
    .ved-desc h4{
        margin: 10px 0;
        font-size: 0.16rem;
        color: #333333;
        overflow: hidden;
        height: 17px;
    }
    .ved-desc p span{
        margin-right:10px ;
    }
    .ved-descFoot{
        font-size: 0.14rem;
        color: #999999;
    }
    .ved-box{
       cursor: pointer;
    }
    /*动画效果添加*/
    .activityBox img{
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    .ved-box:hover img {
        transform: scale(1.1);
        z-index: 10;
    }
    .ved-box:hover h4{
        animation: flash 2s ease-in-out;
    }
    .ved-box:hover .cont-img-mod-text,.ved-box:hover .cont-img-mod-bg{
        animation: fadeInRight 1s linear;
    }
</style>